<template>
  <div class="p-4">
    <Card class="layout-card" title="申请详情">
      <Descriptions bordered :column="3" size="small">
        <DescriptionsItem label="申请标题">
          {{ apply.title }}
        </DescriptionsItem>
        <DescriptionsItem label="申请类别">
          {{ apply.type }}
        </DescriptionsItem>
        <DescriptionsItem label="提交日期">
          {{ apply.time }}
        </DescriptionsItem>
        <DescriptionsItem label="申请描述">
          {{ apply.desc }}
        </DescriptionsItem>
        <DescriptionsItem label="处理进度">
          {{ apply.status }}
        </DescriptionsItem>
        <DescriptionsItem label="审批备注">
          {{ apply.remark }}
        </DescriptionsItem>
      </Descriptions>
    </Card>
    <Card class="layout-card mt-4">
      <Button type="primary"> 批准 </Button>
      <Button> 驳回 </Button>
      <Button type="primary">进一步处理 </Button>
      <Button @click="$router.go(-1)"> 返回 </Button>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { Descriptions, DescriptionsItem, Card, Button } from 'ant-design-vue';

const apply = {
  title: '困难帮扶',
  type: '困难帮扶',
  time: '2022-01-01',
  desc: '申请人需要帮助',
  status: '审批中',
  remark: '无',
};
</script>
